<template xmlns="">
  <div v-loading="loading" ref="myDiv" style="height: 100%;;width:100%;">
    <el-col :span='4' v-if="this.away" class="homeleft" :style="{ width:this.pageWidth+'px' }">
      <div  style="height:48px;width:100%;float: left;">
        <span class="dhlb">
          批量解析
          <el-popover
            placement="top"
            width="280"
            trigger="hover"
            popper-class="custom-popover"
            content="批量导入交易需求原文，获取解析结果">
              <img src="~@/assets/images/wenhao.png" alt="" style="width:15px;height: 15px;margin: 34% 40% 0%;cursor: pointer;" slot="reference">
          </el-popover>
        </span>
        <div class="daorubutton" style="float: right;height: 100%;width: 34%;display: flex;align-items: center;">
          <el-button slot="reference" @click="dialogVisible = true">
            <span style="display: flex;align-items: center;color:#2468F2 ">
              <img src="~@/assets/images/upload.png" alt="" style="width:16px;height: 16px;" slot="reference">
              <span style="width: 3px;"></span>
              导入
            </span>
          </el-button>
          <el-dialog
            title="导入文件"
            ref
            :visible.sync="dialogVisible"
            width="540px"
            height="268px"
            :before-close="handleClose1">
            <el-upload
              class="upload-demo"
              drag
              ref="upload"
              :action="actionUrl"
              :show-file-list="false"
              :headers="headers"
              :on-change="handleChange"
              :file-list="fileList"
              :on-success="handleSuccess"
              :on-progress="handleProgress"
              :on-error="handleError"
              :before-upload="beforeFileUpload"
              :multiple = "false">
              <!-- <i class="el-icon-upload"></i> -->
              <img src="~@/assets/images/upload-dio.png" alt="" style="width:48px;margin: 37px 0 0 0;">
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__text" style="font-size: 12px;">支持上传单个.xlsx/.txt/.pdf格式文件,大小不超过5MB</div>
              <!-- <div class="el-upload__text" slot="tip"></div> -->
              <!-- <div slot="tip" class="custom-progress-bar">
                <el-progress :percentage="progressPercent" :format="formatProgress"></el-progress>
              </div> -->
            </el-upload>
          </el-dialog>
          <!-- 进度条弹窗 -->
          <el-dialog 
            title="导入文件" 
            :visible.sync="progressDialogVisible" 
            width="30%" 
            height="500px" 
            class="el-diog1"  
            :before-close="handleClose">
            <div style="float: left;margin-top: 18%;margin-left: 77%;">
              <el-popover
                placement="top-start"
                width="260"
                visible-arrow="true"
                v-model="isVisible">
                <p>关闭弹窗后，已经开始的导入进程将在后台继续进行</p>
                <div class="inostyle">
                  <span style="font-size: 12px;" @click="iknow">我知道了</span>
                </div>
              </el-popover>
            </div>
            <div class="progress_body" :key="progressMap.length + new Date().getTime()">
              <div style="margin-bottom: 10px;color: #151B26;" v-for="(progress, fileName) in progressMap" :key="gressqMap" >
                <div class="progressstyle" v-if="fileName != ''" style="">
                  <img src="~@/assets/images/fileType.png" alt="" style="width:15px;height: 15px;margin: 0% -1% -0.5%;" slot="reference">
                  &nbsp;{{ fileName }}
                  <el-progress
                    v-if="progress != 100"
                    :color="customColor"
                    :show-text="true"
                    :stroke-width="2"
                    :percentage="progress"
                    :status="progressStatus"
                    :key="progressPercentage">
                  </el-progress>
                  <img src="~@/assets/images/static/close.png" style="float: right;width:15px;height: 15px;margin: -7.5% 1% -0.5%;"/>
                </div>
              </div>
            </div>
            <span slot="footer" class="dialog-footer" style="padding: 504px;">
              
            </span>
          </el-dialog>
        </div>
      </div>
      <div style="height: 93%;overflow-y: scroll;float: left;width: 100%;"  :key="this.menulist1.length+this.visible">
        <div v-if="this.menulist1.length === 0">
          <img src="~@/assets/images/uploadback.png" alt="" style="width:100%;height: 100%;" slot="reference" @click="dialogVisible = true">
        </div>
        <el-menu v-if="this.menulist1.length != 0" default-active="1" class="el-menu-vertical-demo-file"  >
          <el-menu-item  v-if="this.flag"  index="0" >
            <span slot="title">
              <el-input v-model="input" placeholder="新建对话1"></el-input>
              <i class="el-icon-circle-check" @click="Submit()"></i>
              <i class="el-icon-circle-close" @click="Newdialogue()"></i>
            </span>
          </el-menu-item>
          <el-menu-item v-for="(item, index) in this.menulist1" :ref="index" :key="index+1" :index="JSON.stringify(index+1)" @click="handleSelect(JSON.stringify(index+1),item)" >
            <div style="width: 100%;height: 100%;" @mouseover.stop="handleMouseOver(item)" @mouseout.stop="handleMouseOut(item)">
              <div ref="editable" v-if="flag3&&editlist.id === item.id" style="background-color: #fbfbfb;">
                <el-input id="selectableInput" v-model="input1" :placeholder="item.filename"></el-input>
                <!-- <i class="el-icon-circle-check" @click="Submit()"></i>
                <i class="el-icon-circle-close" @click="updateclose()"></i> -->
                <div style="float: right;width: 55px;height:20px;margin-top: 5px;">
                  <img src="~@/assets/images/static/check.png" class="compile-image" @click="Submit()"/>
                  <img src="~@/assets/images/static/close.png" class="compile-image" @click="updateclose()"/>
                </div>
              </div>
              <span :class="colortpye ===item.id? 'menuitem':''" v-if="(!flag3||editlist.id != item.id)" slot="title">
                <span v-if="item.filename.length>10" class="textellipsis">
                  <el-tooltip class="item" effect="dark" :content="item.filename" placement="top">
                    <span>&nbsp;&nbsp;{{item.filename}}</span>
                  </el-tooltip>
                </span>
                <span v-if="item.filename.length<=10" style="margin-left: 12px;">{{item.filename}}</span>
                <!-- &nbsp;&nbsp;{{item.filename}} -->
              </span>
              <el-dropdown trigger="hover" v-if="!flag3||editlist.id != item.id">
                <span class="el-dropdown-link">
                  <!-- <i v-show="hoveflag&&hoveeditlist.id === item.id" class="el-icon-more"></i> -->
                  <div v-show="hoveflag&&hoveeditlist.id === item.id" style="margin-top: -4px;">
                    <img src="~@/assets/images/static/3dian.png" style="width: 14px;margin-right: 16px;" />
                  </div>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item ><span @click="compile(item)">重命名</span> </el-dropdown-item>
                  <!-- <el-dropdown-item ><span @click="deleteconfirm(item)">删除</span> </el-dropdown-item> -->
                  <el-dropdown-item >
                    <el-popover
                      placement="top"
                      width="240"
                      >
                      <p>&nbsp;删除后将不可恢复，确定删除？</p>
                      <div style="text-align: right; margin: 0">
                        <el-button style="background-color: #2468F2;color: white;width: 72px;height: 32px;" type="primary" size="mini" @click="deleteconfirm(item)">确定</el-button>
                        <el-button style="border: 1px solid #E9E9E9;width: 72px;height: 32px;color: black;margin-right: 42px;" size="mini" type="text" @click="deletevisible()">取消</el-button>
                      </div>
                      <!-- <el-button slot="reference">删除</el-button> -->
                      <span slot="reference" >删除</span>
                    </el-popover>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-menu-item>
        </el-menu>
      </div>
    </el-col>
    <el-col :span="20" class="homeright" :style="{ width:this.tpyeWidth+'px' }">
      <div style="align-items: center;display: flex;">
        <img v-if="this.away"  src="~@/assets/images/shouqi.png" class="centered-image" @click="Putitaway()"/>
        <img v-if="!this.away"  src="~@/assets/images/zhankai.png" class="centered-image" @click="Putitaway()"/>
      </div>
      <div style="margin-left: 3px;margin-right: 16px;width: 98%;">
        <filecomponents :listdata="listdata" :key="this.listdata.filename" />
      </div>
    </el-col>
  </div>
</template>

<script>
import DialogueIndex from './dialogueIndex.vue';
import filecomponents from './filecomponents.vue';
import {queryfiles,putfile,deletefile} from "@/api/baiduapi";
import { getAccessToken } from '@/utils/auth'
import Fileupload from './fileupload.vue';


export default {
  name: "Login",
  components: {
    DialogueIndex,
    filecomponents,
    Fileupload
  },
  props:{

  },
  data() {
    return {
      hoveflag:false,
      hoveeditlist:'',
      keyys:0,
      isCollapse:false,
      menulist1:[ ],
      input: '',
      input1: '',
      flag:false,
      flag2:'',
      flag3:false,
      editlist:'',
      away:true,
      fileList: [],
      listdata:{},
      actionUrl: process.env.VUE_APP_BASE_API + '/admin-api/qa/files/upload',
      headers: { Authorization: "Bearer " + getAccessToken() }, // 设置上传的请求头部
      uploadData: {
        file: '',
        name: this.filename
      },
      pageWidth: 0,
      tpyeWidth: 0,
      Widthh:0,
      dialogVisible: false,
      fileList: [],
      progressDialogVisible: false,
      progressPercent: 0,
      progressStatus: null,
      progress:'',
      colortpye:'',
      loading:true,
      progressPercentage:0,
      progressMap: {'': 0},
      gressqMap:'',
      isVisible:false,
      visible:false,
      customColor:'',
      filenum:0,
      startTime:''
    };
  },
  created() {

  },
  mounted () {
    this.handle()
    this.observeDivWidth();

  },
  methods: {
    handleMouseOver(item) {  
      this.hoveflag = true
      this.hoveeditlist = item
      console.log('鼠标悬浮到菜单项上');  
      // 在这里执行你想要的逻辑  
    },  
    handleMouseOut(item) {  
        this.hoveflag = false
        this.hoveeditlist = item
        console.log('鼠标从菜单项上移开');  
      // 在这里执行你想要的逻辑  
    },  
    observeDivWidth() {
      const myDiv = this.$refs.myDiv;
      const observer = new ResizeObserver(entries => {
        for (let entry of entries) {
          this.Widthh = entry.borderBoxSize[0].inlineSize
          this.pageWidth= 240
          this.tpyeWidth= this.Widthh-240
          // console.log('Div width tpyeWidth:', this.Widthh)
          // console.log('entries:', entries)
          // 你可以在这里执行其他逻辑
        }
      });
      observer.observe(myDiv);
    },
    handleResize() {
      if(this.away){
        this.pageWidth = 240
        this.tpyeWidth = this.Widthh-240
      }else{
        this.pageWidth = 0
        this.tpyeWidth = this.Widthh
      }
      // console.log('this.pageWidth',this.tpyeWidth)
    },
    Collapse(){
      this.isCollapse = !this.isCollapse
    },
    compile(item){
      this.flag3 = !this.flag3
      this.editlist = item
      this.input1 = item.filename
      this.$nextTick(() => {  
        const tableInput =document.getElementById('selectableInput')
        // console.log('tableInput',tableInput)
        tableInput.focus()
        tableInput.select()
      });  
    },
    selectText(){
      // this.$refs.input.select();
    },
    handle() {
      queryfiles().then(res => {
        const tenantId = res.data;
        this.menulist1=tenantId.list
        // this.menulist1=[]
        if(this.menulist1.length != 0){
          console.log('menulist1',this.menulist1)
          this.filename = this.menulist1.length>0?this.menulist1[0].filename:''
          this.handleSelect(1,this.menulist1[0])
        }
        this.loading = false
      });
    },
    handleSelect(key,item) {
      this.listdata=[]
      // console.log('key',key)
      this.listdata = item
      this.listdata.type = '2'
      // console.log('listdata',this.listdata)
      this.filename = item.filename
      this.colortpye = item.id
    },
    Newdialogue(){
      this.flag = !this.flag
    },
    Submit() {  // 重命名和添加
      // console.log('解析')
      // console.log('this.editlist',this.editlist)
      console.log('this.input1',this.input1.toLowerCase())
      // if(this.input1.toLowerCase() !== ".xlsx"&&this.input1.toLowerCase() !== ".txt"&&this.input1.toLowerCase() !== ".pdf") {
      const fileName = this.input1
      let pos = fileName.lastIndexOf(".");
      let lastName = fileName.substring(pos, fileName.length);
      // 这里的正则可以根据自己项目中的对文件命名的规范来给
      if(lastName.toLowerCase() !== ".xlsx"&&lastName.toLowerCase() !== ".txt"&&lastName.toLowerCase() !== ".pdf") {
        const TIME_COUNT = 3;
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.timer = setInterval(() => {
            if (this.count > 0) {
              this.count -= 1;
              this.$forceUpdate()
            } else {
              clearInterval(this.timer);
              // 倒计时结束后执行的操作，例如跳转页面或显示内容
              this.timer = null
            }
            console.log("this.count", this.count);
            const notificationDOM = document.getElementsByClassName('test')
            document.getElementsByClassName('test')[notificationDOM.length-1].innerText = "文件必须为.xlsx/.txt/.pdf类型 ("+this.count+"s)" 
            console.log(notificationDOM);
          }, 1000);
          let $notify = this.$notify({
          //   title: 'HTML 片段',
            dangerouslyUseHTMLString: true,
            duration: 3000,
            type: 'error',
            message: <div><div style="float: right;margin-left: 0px;width: 230px;"><span class="test">文件必须为.xlsx/.txt/.pdf类型&nbsp;(3s)</span></div></div>
          });
          console.log($notify);
        }
        this.input1 =''
        this.flag3 = !this.flag3
        return false
      }else{
        const data1 = {id: this.editlist.id,filename:this.input1 }
        putfile(data1).then(res => {
          console.log('文件更新成功')
          queryfiles().then(res => {
            const tenantId = res.data;
            this.menulist1=tenantId.list
            // console.log('menulist1',this.menulist1)
            this.filename = this.menulist1[0].filename
            this.handleSelect(1,this.menulist1[0])
          });
        });
      }
      this.input1 =''
      this.flag3 = !this.flag3

    },
    Putitaway(){
      this.away = !this.away
      this.handleResize()
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    deleteconfirm(item){
      console.log('删除进来了',item)
      // this.$modal.confirm('删除后将不可恢复，确定删除?').then(function () {

      // }).then(response => {
      this.deletedialogue(item);
      // }).catch(() => {});
    },
    deletevisible(){
      this.visible = !this.visible
    },
    deletedialogue(item){
      deletefile(item.id).then(res => {
        console.log('文件删除成功')
        queryfiles().then(res => {
          const tenantId = res.data;
          this.menulist1=tenantId.list
          // console.log('menulist1',this.menulist1)
          this.filename = this.menulist1[0].filename
          this.handleSelect(1,this.menulist1[0])
        });
      });
    },
    updateclose(){
      this.flag3 = !this.flag3
    },
    // 一下为导入流程所需方法
    handlePreview(file) {
      // 预览文件的处理逻辑
    },
    handleRemove(file, fileList) {
      // 移除文件的处理逻辑
    },
    beforeRemove(file, fileList) {
      // 移除文件前的处理逻辑
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    formatProgress(percentage) {
      // 格式化进度条的显示
      return `${percentage}%`;
    },
    handleClose(done) {
      this.isVisible = true
      console.log('donedonedone',done)
      // 可以在这里编写关闭前的逻辑，例如表单验证
      // done();
    },
    handleClose1(done) {
      // console.log('donedonedone',done)
      // 可以在这里编写关闭前的逻辑，例如表单验证
      done();
    },
    iknow(){
      this.isVisible = false
      this.progressDialogVisible = false
    },
    handleChange(){
      this.startTime = new Date().getTime()
      // console.log(new Date().getTime(),'eeee')
    },
    handleSuccess(response, file, fileList) {
      this.$refs.upload.clearFiles();
      // this.progressMap = {'': 0}

      

      console.log('File uploaded successfully:', response);
      setTimeout(() => {
        queryfiles().then(res => {
          const tenantId = res.data;
          this.menulist1=tenantId.list
          // console.log('menulist1',this.menulist1)
          this.filename = this.menulist1[0].filename
          this.handleSelect(1,this.menulist1[0])
          this.dialogVisible = false
          this.progressDialogVisible = false
          this.isVisible = false
        });
      }, 500);
      // 这里可以执行拖拽上传后的业务逻辑
      // delete this.progressMap[file.name];
      // this.progressDialogVisible = false
    },
    handleError(err, file, fileList) { //:on-error="handleError"
      // console.error('Error during upload:', err);
      // this.progressMap = {'': 0}
      setTimeout(() => {
        queryfiles().then(res => {
          const tenantId = res.data;
          this.menulist1=tenantId.list
          // console.log('menulist1',this.menulist1)
          this.filename = this.menulist1[0].filename
          this.handleSelect(1,this.menulist1[0])
          this.dialogVisible = false
          this.progressDialogVisible = false
          this.isVisible = false
        });
      }, 500);
      // const TIME_COUNT = 3;
      // if (!this.timer) {
      //   this.count = TIME_COUNT;
      //   this.timer = setInterval(() => {
      //     if (this.count > 0) {
      //       this.count -= 1;
      //       this.$forceUpdate()
      //     } else {
      //       clearInterval(this.timer);
      //       // 倒计时结束后执行的操作，例如跳转页面或显示内容
      //       this.timer = null
      //     }
      //     console.log("this.count", this.count);
      //     const notificationDOM = document.getElementsByClassName('test')
      //     document.getElementsByClassName('test')[notificationDOM.length-1].innerText = "上传失败，请重试 ("+this.count+"s)" 
      //     console.log(notificationDOM);
      //   }, 1000);
      //   let $notify = this.$notify({
      //   //   title: 'HTML 片段',
      //     dangerouslyUseHTMLString: true,
      //     duration: 3000,
      //     type: 'error',
      //     message: <div><div style="float: right;margin-left: 10px;"><span class="test">上传失败，请重试&nbsp;(3s)</span></div></div>
      //   });
      //   console.log($notify);
      // }
      // 这里可以执行拖拽上传失败的业务逻辑
    },
    handleProgress(event, file, fileList) {
      console.log('this.filenum',this.filenum);
      console.log(`进度：${event.percent}`);
      if(event.percent === 100){
        let time = new Date().getTime() - this.startTime
        if(time < 500){
          console.log('时间慢')
          this.gressqMap = file.name
          this.count = 0
          this.name = file.name;
          console.log('this.name',this.name)
          this.timer = setInterval(() => {
            if (this.count < 100) {
              this.count+=10;
              this.progressMap[file.name] = this.count
              this.$forceUpdate()
            } else {
              clearInterval(this.timer);
              // 倒计时结束后执行的操作，例如跳转页面或显示内容
              this.timer = null
              this.progressPercentage= Math.floor((event.loaded /event.total)* 100);
              // console.log('显示进度条弹窗',this.progressPercentage)
              // 设置进度条状态（可选）
              if (this.progressPercentage === 100) {
                this.progressStatus = 'success';
              } else if (this.progressPercentage < 100) {
                this.progressStatus = 'exception';
                this.customColor = '#2468F2'
              }
            }
          }, 100);      
        }else {
          this.gressqMap = file.name
          this.progressMap[file.name] = Math.round((event.loaded / event.total) * 100);
          this.progressPercentage= Math.floor((event.loaded /event.total)* 100);
          if (this.progressPercentage === 100) {
            this.progressStatus = 'success';
          } else if (this.progressPercentage < 100) {
            this.progressStatus = 'exception';
            this.customColor = '#2468F2'
          }
        }
      }
      if(!this.timer && event.percent != 100){
        console.log('时间长')
        this.gressqMap = file.name
        this.progressMap[file.name] = Math.round((event.loaded / event.total) * 100);
        this.progressPercentage= Math.floor((event.loaded /event.total)* 100);
        this.progressMap[file.name] = this.progressPercentage
        console.log(this.progressMap);
        // console.log('显示进度条弹窗',this.progressPercentage)
        // 设置进度条状态（可选）
        if (this.progressPercentage === 100) {
          this.progressStatus = 'success';
        } else if (this.progressPercentage < 100) {
          this.progressStatus = 'exception';
          this.customColor = '#2468F2'
        }
      }

      // 计算进度百分比
      // if(Math.floor((event.loaded /event.total)* 100) === 100){
      // }
    },
    successfileevent(){
      console.log('文件进度已全部完成')
      setTimeout(() => {  
        queryfiles().then(res => {
          console.log('文件进度已全部完成更新请求发送')
          console.log('更新请求发送res.data',res.data)
          const tenantId = res.data;
          this.menulist1=tenantId.list
          this.filename = this.menulist1[0].filename
          this.handleSelect(1,this.menulist1[0])
          this.dialogVisible = false
          this.progressDialogVisible = false
          this.isVisible = false
          this.progressMap = {'': 0}
        });
      }, 5000);  
    },
    beforeFileUpload(file){
      this.filenum++
      console.log('上传文件进去校验')
      const maxSize = 1024 * 1024 * 5; // 1MB
      const fileName = file.name;
      let pos = fileName.lastIndexOf(".");
      let lastName = fileName.substring(pos, fileName.length);
      // 这里的正则可以根据自己项目中的对文件命名的规范来给
      if(lastName.toLowerCase() !== ".xlsx"&&lastName.toLowerCase() !== ".txt"&&lastName.toLowerCase() !== ".pdf") {
        const TIME_COUNT = 3;
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.timer = setInterval(() => {
            if (this.count > 0) {
              this.count -= 1;
              this.$forceUpdate()
            } else {
              clearInterval(this.timer);
              // 倒计时结束后执行的操作，例如跳转页面或显示内容
              this.timer = null
            }
            console.log("this.count", this.count);
            const notificationDOM = document.getElementsByClassName('test')
            document.getElementsByClassName('test')[notificationDOM.length-1].innerText = "文件必须为.xlsx/.txt/.pdf类型 ("+this.count+"s)" 
            console.log(notificationDOM);
          }, 1000);
          let $notify = this.$notify({
          //   title: 'HTML 片段',
            dangerouslyUseHTMLString: true,
            duration: 3000,
            type: 'error',
            message: <div><div style="float: right;margin-left: 0px;width: 230px;"><span class="test">文件必须为.xlsx/.txt/.pdf类型&nbsp;(3s)</span></div></div>
          });
          console.log($notify);
        }
        return false
      }else if(file.size > maxSize){
        const TIME_COUNT = 3;
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.timer = setInterval(() => {
            if (this.count > 0) {
              this.count -= 1;
              this.$forceUpdate()
            } else {
              clearInterval(this.timer);
              // 倒计时结束后执行的操作，例如跳转页面或显示内容
              this.timer = null
            }
            console.log("this.count", this.count);
            const notificationDOM = document.getElementsByClassName('test')
            document.getElementsByClassName('test')[notificationDOM.length-1].innerText = "上传文件不得超过5MB！ ("+this.count+"s)" 
            console.log(notificationDOM);
          }, 1000);
          let $notify = this.$notify({
          //   title: 'HTML 片段',
            dangerouslyUseHTMLString: true,
            duration: 3000,
            type: 'error',
            message: <div><div style="float: right;margin-left: 0px;width: 230px;"><span class="test">上传文件不得超过5MB！&nbsp;(3s)</span></div></div>
          });
          console.log($notify);
        }
      }else{
        this.progressDialogVisible = true;
        this.dialogVisible = false
        return true
      }
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
  },
  destroyed() {
  },

};
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/login.scss";
.homeleft {
  height: 94.5vh;
  // width: 330px;
  // min-width: 20%;
  // box-shadow: 5px 5px 10px #00000021;
  background-color: #fbfbfb;
  // overflow-y: scroll; /* 添加垂直滚动条 */
}
::-webkit-scrollbar {
    width: 0px; /* 控制滚动条宽度 */
}

::-webkit-scrollbar-track {
    background-color: #f5f5f5; /* 控制滚动条背景色 */
}
.dialogue_component{
  margin-left: 5%;
}
.input_body{
  width: 100%;
  text-align: center;
}
.homeright {
  height: 100%;
  // width: auto;
  // background-color: #F5F9FF;
  background-image: url('~@/assets/images/bg@3x.png');
  background-size: 100% 100%;
  display: flex;
  // padding-left: 32px;
  // align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中，如果也需要水平居中的话 */
}
.centered-image {
  width:13px;
  // max-width: 100%; /* 确保图片不会超出容器 */
  height: auto; /* 保持图片的宽高比 */
}
.compile-image {
  width:18px;
  max-width: 100%; /* 确保图片不会超出容器 */
  height: auto; /* 保持图片的宽高比 */
  margin-left: 8px;
}
.dhlb {
  width: 73px;
  min-width: 20%;
  height: 100%;
  float: left;
  margin-left: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
}
.wenhao-image {
  height: 20px;
  width: 20px;
  margin: 1%;
}
.el-menu {
  border-right: solid 1px #ececec00;
  list-style: none;
  position: relative;
  margin: 0;
  padding-left: 0;
  background-color: #ffffff00;
}

.el-menu-item * {
  vertical-align: baseline;
}
.el-dropdown {
  display: inline-block;
  position: relative;
  color: #606266;
  font-size: 14px;
  float: right;
  // margin-top: -40px;
}
.el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 160px;
}
.daorubutton .el-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #ffffff00;
  border: 0px solid #DCDFE6;
  border-color: #DCDFE6;
  color: #1890ff;
  -webkit-appearance: none;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  font-weight: 400;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
}
.menuitem {
  height: 100%;
  width: 111%;
  background-color: #E6F0FF;
  border-radius: 10px;
  align-items: center;
  display: contents;
}
.el-menu-item:hover, .el-menu-item:focus {
  outline: none;
  background-color: #E6F0FF;
}
.el-menu-vertical-demo-file .el-menu-item {
  height: 41px;
  width: 90%;
  margin-left: 5%;
  border-radius: 6px;
  line-height: 41px;
  font-size: 14px;
  color: #303133;
  padding: 0 0px;
  padding-left: 0px !important;
  margin-top: 2%;
  list-style: none;
  cursor: pointer;
  position: relative;
  -webkit-transition: border-color 0.3s, background-color 0.3s, color 0.3s;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  white-space: nowrap;
}
.el-dropdown-menu {  
  /* 设置下拉菜单的样式 */  
  min-width: 0px !important;
} 
:deep(.el-diog1 .el-dialog__body) {
  padding: 16px 24px 24px 24px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
  max-height: calc(100vh - 200px);
}
:deep(.el-diog1 .el-dialog) {
  display: -webkit-box;
  display: -ms-flexbox;
  /* display: flex; */
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  max-width: calc(100% - 30px);
  max-height: calc(100% - 70px);
}
:deep(.el-dialog__footer) {
  padding: 71px;
  padding-top: 10px;
  text-align: right;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
:deep(.el-progress__text) {
    font-size: 14px;
    color: #60626600 !important;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    line-height: 1;
}
.progressstyle:hover {
  background-color: #F7F7F9;
  // background-image: url("~@/assets/images/static/close.png");
  // background-size: 15px 15px;
  // background-repeat: no-repeat;
  // background-position: right top;
}
:deep(.el-input__inner) {
  // 设置光标颜色
  border-color: #144BCC !important;
}
:deep(.el-input__inner:hover) {
  border-color: #144BCC !important;
}
:deep(.el-input--medium .el-input__inner) {
  height: 36px;
  line-height: 35px;
}
</style>
<style lang="scss">
.el-upload-dragger {
  background-color: #fff;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 492px !important;
  height: 180px;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.el-upload-dragger .el-upload__text {
  color: #606266;
  font-size: 14px;
  text-align: center;
  margin-top: 8px;
}
.upload-demo{
  text-align: center;
}
.upload__tip{
  text-align: left !important;
}
.el-dialog__header {
  padding: 24px 0px 0px 24px;
}
:deep(.el-diog1 .el-dialog__body) {
  padding: 16px 24px 24px 24px;
  padding: 16px 24px 24px 24px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
  max-height: calc(100vh - 200px);
}
.progress_body{
  margin: 2px;
  padding: 7px 18px 17px 18px;
  border: 1px dashed #D4D6D9; /* 设置边框为2px的虚线，颜色为黑色 */
  border-radius: 5px; /* 设置圆角的半径为5px */
  float: left;
  width: 90%;
  height: 176px;
  overflow-y: auto;
  position: absolute;
}
.el-dialog:not(.is-fullscreen) {
  margin-top: 16vh !important;
  border-radius: 5px; /* 设置圆角的半径为5px */
}
.inostyle {
  text-align: center;
  margin: 0px;
  height: 26px;
  width: 67px;
  float: right;
  background-color: #2468F2;
  border-radius: 5px;
  align-items: center;
  display: grid;
  color: #ffffff;
  cursor: pointer;
}
.textellipsis {
  position: relative; /* 为伪元素定位做准备 */
  width: 160px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  float: left;
}
.el-popover.el-popper.custom-popover {
  height: 40px !important;
  align-items: center;
  display: flex;
  top: 235px !important;
  color: black;
  // margin-top: -300px !important;
}
:deep(.el-dialog) {
  display: -webkit-box;
  display: -ms-flexbox;
  /* display: flex; */
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  max-width: calc(100% - 30px);
  max-height: calc(100% - 70px);
}
:deep(.el-dialog__footer) {
  padding: 55px;
  padding-top: 10px;
  text-align: right;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
:deep(.el-progress__text) {
    font-size: 14px;
    color: #60626600 !important;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    line-height: 1;
}
</style>
